<template>
  <div class="smoothness-animation-home">
    <img
      class="smoothness-animation-img"
      src="../../assets/smoothness-animation-bg.png"
      alt=""
    >
    <div class="fixed-top-box">
      <TopBar
        class="fixed-top-bar"
        :config="TopBarConfig"
        :gobackBool="gobackBool">
      </TopBar>
    </div>
    <div class="smoothness-animation-placeholder"></div>
    <div class="my-tab-class">
      <div
        :class="{'fixed-scroll-class':fixedScrollClass}">
        <van-dropdown-menu active-color="#2E90FF">
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @open="scrollToPage"
            @change="filtrateChange"
          />
          <van-dropdown-item
            v-model="value2"
            :options="option2"
            @open="scrollToPage"
            @change="filtrateChange"
          />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="smoothness-animation">
        <div class="smoothness-animation-main" id="section_1">
          <div
            class="smoothness-animation-item"
            v-for="item in list"
            :key="item.id">
            {{ item.name }}
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import TopBar from '../../components/topBar/index.vue'
export default{
  components:{ TopBar },
  data(){
    return{
      TopBarConfig:{
        title:'激励商城',
        seek:'',
        mainBool:true
      },
      gobackBool:false,
      list:[
        { name:'默认数据',id:1 },
        { name:'默认数据',id:2 },
        { name:'默认数据',id:3 },
        { name:'默认数据',id:4 },
        { name:'默认数据',id:5 },
        { name:'默认数据',id:6 },
        { name:'默认数据',id:7 },
      ],
      MyTabConfig:{
        direction:'transverse'
      },
      fixedScrollClass:false,
      needScrollTop:0,
      scrollTopIng:0,
      value1: 0,
      value2: 'a',
      option1: [
        { text: '默认顺序', value: 0 },
        { text: '兑换积分从低到高', value: 1 },
        { text: '兑换积分从高到低', value: 2 },
      ],
      option2: [
        { text: '全部积分', value: 'a' },
        { text: '1-100', value: 'b' },
        { text: '101-1000', value: 'c' },
        { text: '1000以上', value: 'd' },
      ],

    }
  },
  created(){
  },
  mounted(){
    this.$nextTick(
      () => {
        // 监听页面滚动事件
        window.addEventListener('scroll', this.onScroll)
        // 触发效果所需移动的距离
        this.needScrollTop = document.getElementsByClassName('fixed-top-box')[0].getBoundingClientRect().height + document.getElementsByClassName('smoothness-animation-placeholder')[0].getBoundingClientRect().height - 20
      }
    )
  },
  methods:{
    // 平滑滚动到指定位置
    scrollToPage(){
      if(this.scrollTopIng<this.needScrollTop){
        let scrollOptions = {
          left: 0,
          top: this.needScrollTop,
          behavior:'smooth'
        }
        window.scrollTo(scrollOptions);
      }
    },
    filtrateChange(){
      setTimeout(() => {
        this.list = [
          { name:'调用了接口，我是返回的新数据',id:1 },
          { name:'调用了接口，我是返回的新数据',id:2 },
          { name:'调用了接口，我是返回的新数据',id:3 },
          { name:'调用了接口，我是返回的新数据',id:4 },
          { name:'调用了接口，我是返回的新数据',id:5 },
          { name:'调用了接口，我是返回的新数据',id:6 },
          { name:'调用了接口，我是返回的新数据',id:7 },
        ]
      },1000)
    },
    // 页面滚动时触发
    onScroll(){
      // scrollTop为显示屏顶部与整个文档顶部间的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollTopIng = scrollTop
      // 固定筛选部分
      // 已经移动的距离小于触发效果所需移动的距离
      scrollTop<this.needScrollTop?this.fixedScrollClass = false:this.fixedScrollClass = true
      // 改变mytab样式
      scrollTop>document.getElementsByClassName('fixed-top-box')[0].getBoundingClientRect().height?this.TopBarConfig.mainBool = false : this.TopBarConfig.mainBool = true
    },
  }
}
</script>

<style lang="scss" scoped>
.smoothness-animation-home{
  .smoothness-animation-img{
    width: 3.75rem;
    height: 2.15rem;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .fixed-top-box{
    height: 0.44rem;
    position: relative;
    .fixed-top-bar{
      position: fixed;
      top: 0;
      // background-color: aquamarine;
    }
  }
  .smoothness-animation-placeholder{
    width: 3.43rem;
    height: 1.87rem;
    background-color: #fff;
    margin: 0.12rem 0.16rem;
    border-radius: 0.16rem 0.16rem;
    box-shadow: 0.02rem 0.03rem 0.10rem 0.02rem #ecf3f8;
  }
  .my-tab-class{
    position: relative;
    height: 0.48rem;
  }
  .fixed-scroll-class{
    position: fixed;
    top: 0.44rem;
    height: 0.48rem;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
  }
  .smoothness-animation-operate{
    margin: 0.16rem 0.16rem 0.16rem 0.16rem;
  }
  .smoothness-animation{
    overflow: hidden;
    padding: 0 0.16rem;
    box-sizing: border-box;
    .smoothness-animation-main{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .smoothness-animation-item{
          height: 2.66rem;
          width: 1.66rem;
          background: skyblue;
          margin-bottom: 0.16rem;
        }
    }
  }

  // ::v-deep .top-bar .top-bar-title{
  //   color: #fff;
  // }
}
::v-deep .van-dropdown-menu__bar{
  box-shadow:none;
  width: 50%;
  margin: 0 0.16rem;
}
</style>
